<template>
	<view class="matchmain animated fadeIn faster">
		<view class="position-fixed w-100 z-index-100 pb-1" :style="{'paddingTop':$store.state.statusBarHeight+'px','backgroundColor':bgcolor}">
			<view class="d-flex d-flex-middle d-flex-between" :style="{'height': $store.state.titleBarHeight + 'px'}">
				<view class="pl-2" @click="goBack"><text class="iconfont icon-31fanhui1 font30 colorfff"></text></view>
				<view class="colorfff">选择搭子</view>
				<text class="iconfont icon-31fanhui1 font30 colorfff vhiden"></text>
			</view>
		</view>
		<view :style="{paddingTop:$store.state.statusBarHeight+'px',height: $store.state.titleBarHeight + 'px'}"></view>
		<view class="d-flex d-flex-center d-flex-middle mb-4 mt-6">
			<text class="colorman mr-1 font30">5</text>
			<text class="colorfff font24">位搭子正在等你选择</text>
		</view>
		<view class="d-flex d-flex-between px-6 position-absolute" style="width: 74%; left: 50%; transform: translateX(-50%);">
			<view class="" v-for="i in DaziList" :key="i.id">
				<image :src="i.img" :class="['rounded', 'mt-3', i.id == currentDazi? 'currentDazi' : '']" style="width: 130rpx; height: 130rpx; border: 1px solid #fff;"></image>
			</view>
		</view>
		<view class="bg-fff rounded50 pb-5" style="width: 82%; margin: 230rpx auto 0; overflow: hidden;">
			<text class="iconfont icon-gengduo1 font32 morecolor d-flex d-flex-end mr-4 mt-2"></text>
			<view class="voice colorfff text-center">
				8
			</view>
			<view class="font30 text-center" style="color: #3E3A39;">希望可以陪到你~</view>
			<view class="d-flex-column d-flex-middle d-flex-center mt-7">
				<view class="d-flex">
					<view class="font32 font-bold mr-2">7737.摇光(国野)</view>
					<view class="">
						<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%203404.png" style="width: 30rpx; height: 30rpx;"></image>
					</view>
				</view>
				<view class="font26 mt-2" style="color: #9D9D9E;">30分钟</view>
				<view class="d-flex">
					<view class="d-flex mt-2 mr-2">
						<view class="d-flex-btn" style="background: #F6B42C; padding: 4rpx 12rpx 4rpx 20rpx; border-radius: 10rpx 0 0 10rpx;">
							<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%202585.png" style="width: 40rpx; height: 32rpx;"></image>
						</view>
						<view class="" style="background: #fceacc; color: #FF9645; padding: 6rpx 16rpx 6rpx 10rpx; border-radius: 0 10rpx 10rpx 0;">王者以下</view>
					</view>
					<view class="d-flex mt-2">
						<view class="d-flex-btn" style="background: #B73DE3; padding: 4rpx 10rpx 4rpx 10rpx; border-radius: 10rpx 0 0 10rpx;">
							<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%203178.png" style="width: 40rpx; height: 32rpx;"></image>
						</view>
						<view class="" style="background: #eed2f9; color: #B73DE3; padding: 6rpx 16rpx 4rpx 6rpx; border-radius: 0 10rpx 10rpx 0;">最强王者</view>
					</view>
				</view>
				<view class="d-flex-column d-flex-middle mt-5">
					<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%202768.png" style="width: 130rpx; height: 130rpx;"></image>
					<text class="font24">ENTG</text>
				</view>
				<view class="colorfff linerbg pt-2 pb-3 rounded50 font34 text-center mt-5" style="width: 70%;">就选他了</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { manner } from "@/util/manner.js";
	export default {
		data() {
			return {
				bgcolor:'transparent',
				currentDazi: 1,
				DaziList:[
					{
						id: 0,
						img: 'https://168809.oss-cn-hangzhou.aliyuncs.com/community/temp/chat03.png'
					},
					{
						id: 1,
						img: 'https://168809.oss-cn-hangzhou.aliyuncs.com/community/temp/chat03.png'
					},
					{
						id: 2,
						img: 'https://168809.oss-cn-hangzhou.aliyuncs.com/community/temp/chat03.png'
					}
				]
			}
		},
		onPageScroll(e) {
			let scrollTop = e.scrollTop
			if (scrollTop > 10) {
				this.bgcolor = '#191635'
			}else{
				this.bgcolor = 'transparent'
			}
		},
		methods: {
			goBack(){
				manner.goBack()
			}
		}
	}
</script>

<style scoped>
.matchmain{
	background-image: url('https://168809.oss-cn-hangzhou.aliyuncs.com/community/temp/machbg.png');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 0 100%;
	min-height: 100vh;
}
.metting-box {
	width: 98%;
	height: 940rpx;
	left: 50%;
	transform: translateX(-50%);
	border-radius: 50rpx 50rpx 0 0;
	background-color: #fff;
	overflow: hidden;
}
.linerbg-b {
	background: linear-gradient( 180deg, #61D1E5 0%, rgba(106,211,230,0.94) 10%, rgba(131,219,234,0.78) 29%, rgba(172,230,241,0.52) 54%, rgba(227,247,250,0.17) 86%, rgba(255,255,255,0) 100%);
}
.colorman{
	color:#5db0fe
}
.currentDazi {
	width: 250rpx !important;
	height: 250rpx !important;
	margin-top: 0 !important;
	padding: 10rpx !important;
	border: 0 !important;
	background-image: linear-gradient(to top, #fab452, #9d41d3);;
}
.voice {
	width: 200rpx;
	height: 76rpx;
	line-height: 70rpx;
	margin: 45rpx auto 0;
	background: url(https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%203416.png);
	background-size: contain;
}
</style>
